<template>
    <f7-views tabs>
        <f7-view v-for="(tab, i) in tabs" :id="tab.id" :url="tab.url" tab :name="tab.id"
            :main="i == 0 ? true : false" :tab-active="i == 0 ? true : false"
            @tab:show="tabShow(tab.id)" :style="{height: viewsHeight + 'px'}">
        </f7-view>
	    <f7-toolbar tabbar labels bottom bottom-md id="homeToolbar">
	        <f7-link v-for="(tab, i) in tabs" :tab-link="'#' + tab.id"
	            :tab-link-active="i == 0 ? true : false">
	            <f7-icon :material="tab.icon"></f7-icon>
                <span class="tabbar-label">{{tab.name}}</span>
	        </f7-link>
	    </f7-toolbar>
    </f7-views>
</template>

<script>
import Common from '@/utils/Common.js';
import { getUser, setUser, clearUser } from '@/utils/auth';
import request from '@/utils/request.js';
import store from '@/store';
import db from '@/utils/db';

export default {
	store: store,
	data() {
		return {
			tabs: [],
			toolbarHeight: 0
		}
	},
	methods: {
		tabShow: function(tabId) {
			window.currentViewName = tabId;
		}
	},
	computed: {
		viewsHeight() {
	        return window.innerHeight - this.toolbarHeight;
		}
	},
	mounted() {
		let self = this;
		let promises = [];
    	let finishCount = 0;
    	let totalCount = 0;
    	let dialog = self.$f7.dialog.progress('同步数据中', finishCount);
		if(Common.isOnline()) {
			let metas = [
				{entity: 'user', table: 'tb_user'},
        		{entity: 'project', table: 'tb_project'},
        		{entity: 'userProject', table: 'tb_user_project'},
        		{entity: 'bidSection', table: 'tb_bid_section'},
        		{entity: 'contractorType', table: 'tb_contractor_type'},
        		{entity: 'contractor', table: 'tb_contractor'},
        		{entity: 'problemClass', table: 'tb_problem_class'},
        		{entity: 'problem', table: 'tb_problem'},
        		{entity: 'checkItemGuideline', table: 'tb_check_item_guideline'},
        		{entity: 'bidSectionCheckItem', table: 'tb_bid_section_check_item'},
        		{entity: 'bidSectionContractor', table: 'tb_bid_section_contractor'},
        		{entity: 'houseType', table: 'tb_house_type'},
                {entity: 'building', table: 'tb_building'},
                {entity: 'unit', table: 'tb_unit'},
                {entity: 'floor', table: 'tb_floor'},
                {entity: 'house', table: 'tb_house'}
			];
			metas.forEach(meta => {
				let promise = db.sync(meta.entity, meta.table).then(({deleteCount, updateCount, insertCount}) => {
					console.log('sync ' + meta.table + ': delete = ' + deleteCount + ', update = ' + updateCount + ', insert = ' + insertCount);
					return store.dispatch(meta.entity)
				}).then(() => {
					finishCount++;
					dialog.setProgress(parseInt(finishCount / totalCount * 100));
				});
				promises.push(promise);
			});
			totalCount += metas.length;
			
			metas = [
				{entity: 'checkQualityBatch', table: 'tb_checkquality_batch'},
				{entity: 'batchCc', table: 'tb_batch_cc'},
				{entity: 'batchUser', table: 'tb_batch_user'},
				{entity: 'qualityMeasureCheckQualityRepair', table: 'tb_quality_measure_checkquality_repair'}
			];
			metas.forEach(meta => {
				let promise = db.sync(meta.entity, meta.table).then(({deleteCount, updateCount, insertCount}) => {
					console.log('sync ' + meta.table + ': delete = ' + deleteCount + ', update = ' + updateCount + ', insert = ' + insertCount);
					finishCount++;
					dialog.setProgress(parseInt(finishCount / totalCount * 100));
					return Promise.resolve();
				});
				promises.push(promise);
			});
			totalCount += metas.length;
		}
		Promise.all(promises).then(() => {
			dialog.close();
			self.tabs.push({
	            id: 'tab-1',
	            name: '工作台',
	            icon: 'home',
	            url: '/Workbench'
	        });
			self.tabs.push({
	            id: 'tab-2',
	            name: '任务',
	            icon: 'email',
	            url: '/Todo'
	        });
			self.tabs.push({
	            id: 'tab-3',
	            name: '设置',
	            icon: 'settings',
	            url: '/Settings'
	        });
	        window.currentViewName = self.tabs[0].id;
		});
        let toolbar = document.getElementById('homeToolbar');
        self.toolbarHeight = parseInt(window.getComputedStyle(toolbar).height);
	}
}
</script>

<style scoped>

</style>